import React from 'react'
import {inject, observer} from 'mobx-react';
import {toJS} from 'mobx';
import {Tools,Icon,PhotoSwipe } from 'weaver-mobile';
import { withRouter } from 'react-router-dom';
import {getUrlParam} from '../../util/common'
const getLabel = Tools.getLabel;

@withRouter
@inject ('toDetailPageStore')
@observer
class ToDetailPage extends React.Component {
    constructor(props){
        super(props); 
        this.state = {
            showAll:false,
            isScroll:false,
        }
        this.sreenHeight = 0; 

        const {match,match:{path,isExact,params},location:{search}} = this.props;
        let urlParam = getUrlParam(search);
        
        this.routeInfo = {
            ...match,
            id:urlParam.invoiceId
        };
    }

    static defaultProps = {
        prefixCls:"fna-invoiceDetails"
    }

    componentDidMount() {
        const { toDetailPageStore } = this.props;
        const { setPageEmbile } = toDetailPageStore;
        this.sreenHeight = document.documentElement.clientHeight;

        setPageEmbile({id:this.routeInfo.id},true);
    }

    componentDidUpdate(){
        
       
    }

    render() {
        const { toDetailPageStore,prefixCls } = this.props;
        const { isPdf,imageId,headeData,bodyData,detailsArr,showAllDetailsArr,detailsEditList } = toDetailPageStore;

        return (
            <div className={`${prefixCls}`}>
                <header>
                    <img src={'/images/fna/fnaMobile/kou.png'} width='100%'/>
                </header>

                <div className={`${prefixCls}-body`}> 
                    <div className={`${prefixCls}-body-content`} key={'one'}>
                        {isPdf ? <a target='_blank' href={`/weaver/weaver.file.FileDownload?fileid=${imageId}&cwid=fna`}>
                                <Icon type='pdf' color={'#734AFD'}/>
                            </a>
                            : (imageId == 0 ? 
                                <div className={'noPic'}>{'暂无图片'}</div> 
                                : 
                                <img src={`/weaver/weaver.file.FileDownload?fileid=${imageId}&cwid=fna`} onClick={()=>{
                                        PhotoSwipe.showImage([{url: `/weaver/weaver.file.FileDownload?fileid=${imageId}&cwid=fna`}], 0);
                                    }}
                                />)}
                        {headeData.map( i=>{
                            return (
                                <div className={'fna-invoiceDetails-head-div'} key={Math.random()}>
                                    <div className={'fna-invoiceDetails-head-div-left'}><span>{i.title}</span>:</div>
                                    <div className={'fna-invoiceDetails-head-div-right'}><span>{i.money}</span></div>
                                </div>
                            )
                        })}
                        <div><img src={'/images/fna/fnaMobile/split-line-02.png'} width='100%'/></div>
                        {bodyData.map( items=>{
                            let details = this.state.showAll ? showAllDetailsArr : detailsArr;

                            return(
                                <div key={items.key ? items.key : 'invoiceDetails'} className={'invoiceDetails'}>
                                    <div>{items.caption}</div>
                                    <div className={'fixHeight'}>
                                        {details.map(i=>{
                                            let _class = i.key ? this.getClass(i.key) : '';
                                            let comment;
                                            if(i.show){
                                                comment = <div className={'fna-invoiceDetails-content-div'} key={i.id}>
                                                    <div className={'fna-invoiceDetails-content-div-left'}>{i.title}：</div>
                                                    <div className={`fna-invoiceDetails-content-div-right ${_class}`}>{i.value}</div>
                                                </div>
                                            }else {
                                                comment = ''
                                            }

                                            return comment
                                            
                                        })}

                                        {JSON.stringify(detailsEditList) != '{}' && this.state.showAll &&
                                            <div className={'editList'}>
                                                <table className={detailsEditList.col == '5' ? 'editList_5' : 'editList_7'}>
                                                    <tbody>
                                                        <tr>
                                                            <td colSpan={'5'}>{detailsEditList.type}</td>
                                                        </tr>
                                                    
                                                        {
                                                            detailsEditList.conditions.map(c =>{
                                                                return (
                                                                    <tr key={c.key}>
                                                                        {c.items.map(f =>(
                                                                            <td>{f.title}</td>
                                                                        ))}
                                                                    </tr>
                                                                )
                                                            }) 
                                                        }
                                                    </tbody>
                                                </table>
                                            </div>
                                        }
                                    </div>


                                        
                                    {this.state.showAll ? 
                                        <div className={'showAll'} onClick={()=>{this.getAllShow(false);}}>{getLabel(517380,'收起全部')}</div> 
                                        : 
                                        <div className={'showAll'} onClick={()=>{this.getAllShow(true);}}>{getLabel(84533,'展开全部')}</div>
                                    }
                                        
                                    
                                </div>
                               
                            )
                            
                        })}
                        
                        
                    </div>
                    
                </div>
            
            </div>
        )
    }

    getAllShow = (bool) =>{
        const {toDetailPageStore} = this.props;
        // const {} = toDetailPageStore;

        this.setState({showAll:bool})
    }
    
    getClass = (key) =>{
        let className = '';
        if(key == 'checkStatus'){
            className = 'fna-textColor-red'
        }
        return className;
    }

}

export default ToDetailPage;